<template>
  <!-- 类的样式 -->
  <!-- 1. 放置字符串 -->
  <h1 :class="msg">hello</h1>
  <h1 v-bind:class="msg">hello</h1>
  <!-- 2. 放置对象 -->
  <h1 :class="{active: isActive}">hello2</h1>
  <button @click="toggleActive">切换active</button>
  <!-- 3. 放置数组 -->
  <h1 :class="arr">hello3</h1>
  <!-- 4. 数组和对象结合 -->
  <h1 :class="[class4,{active:isActive}]">hello4</h1>

</template>

<script>
// 声明式
export default {
  name: 'App',
  data() {
    return {
      msg: 'helloworld',
      isActive: true,
      arr: ['swiper', 'active'],
      class4:'abc'
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive
      this.arr.pop()
      this.class4 = 'cba'
    }
  }
}
</script>

<style>
.active {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: yellowgreen;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>